<script lang="ts">
	import { LEARN_LEVEL, type CardInfo } from '$lib/api/proto/resource_card_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { roadmapStore } from '../../store.svelte';

	interface Props {
		cardId: string;
		cardList: CardInfo[];
		onChange: (cardId: string, newLv: LEARN_LEVEL) => void;
		onClose: () => void;
	}

	const props: Props = $props();

	let card = $state(null as CardInfo | null);
	let linkCardList = $state([] as CardInfo[]);

	function init() {
		const cardInfo = props.cardList.find((item) => item.cardId == props.cardId);
		card = cardInfo ?? null;
		const linkCardIdList = (cardInfo?.linkList ?? []).map((item) => item.cardId);
		const linkCardInfoList = props.cardList.filter((item) => linkCardIdList.includes(item.cardId));
		linkCardList = linkCardInfoList;
	}

	async function changeLearnLevel(cardId: string, newLv: LEARN_LEVEL) {
		if (userStore.userSession == null || roadmapStore.selectNodeIdList.length == 0) {
			return;
		}
		await callApi(
			appStore.resourceCardApiClient.setStateByRoadmap({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: roadmapStore.selectNodeIdList[0],
				cardId: cardId,
				learnLevel: newLv
			}).response
		);
		props.onChange(cardId, newLv);
		roadmapStore.resourceStateVersion += 1;
	}

	$effect(() => {
		init();
	});
</script>

{#snippet resourceCard(card: CardInfo)}
	<div class="w-[350px] bg-base-300 p-2 rounded-box">
		<h5 class="text-base font-bold">{card.basicInfo?.title}</h5>
		<SimpleEditor sizeClass="h-[180px]" data={card.basicInfo?.content} readOnly />
		<label class="select mt-[10px]">
			<span class="label">掌握程度</span>
			<select
				value={card.learnLevel}
				onchange={(e) => changeLearnLevel(card.cardId, parseInt(e.currentTarget.value))}
				disabled={roadmapStore.roadmapMode == 'view'}
			>
				<option value={LEARN_LEVEL.LEARN_LEVEL_NONE}>未学习</option>
				<option value={LEARN_LEVEL.LEARN_LEVEL_KNOW}>了解</option>
				<option value={LEARN_LEVEL.LEARN_LEVEL_KNOW_WELL}>熟悉</option>
				<option value={LEARN_LEVEL.LEARN_LEVEL_MASTER}>掌握</option>
				<option value={LEARN_LEVEL.LEARN_LEVEL_SKILLFUL}>精通</option>
			</select>
		</label>
	</div>
{/snippet}

<dialog class="modal modal-open">
	<div class="modal-box w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onClose()}>✕</button
		>
		<h3 class="text-lg font-bold">查看知识卡片</h3>
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
			{#if card != null}
				<h4 class="text-base font-bold">当前卡片</h4>
				{@render resourceCard(card)}
			{/if}
			{#if linkCardList.length > 0}
				<h4 class="text-base font-bold mt-[10px]">相关卡片</h4>
				<div class="flex flex-wrap gap-2 mt-[10px]">
					{#each linkCardList as card}
						{@render resourceCard(card)}
					{/each}
				</div>
			{/if}
		</div>
	</div>
	<div class="modal-backdrop">
		<button onclick={() => props.onClose()}>close</button>
	</div>
</dialog>
